
<nav class="navbar navbar-default subnav ">

    <div class="container">
        <div class="navbar-header">
            <a class="navbar-brand" href="#">爬虫管理</a>
        </div>
        <div id="navbar" class="navbar-collapse collapse">
            <ul class="nav navbar-nav">
                <li>
                <a class="active" href="#/flowcrawl">FlowCrawl爬虫配置</a>
                </li>
                <li>
                <a href="#/detail">爬虫插件详情</a>
                </li>
            </ul>
        </div>
    </div>
</nav>


<div class="container">

    <div id="crawl-info-panel" class="col-md-12" >
        <div class="col-md-4">
            <button type="text" class="button button-small button-raised button-capitalize" ng-click="create_crawl()">创建新爬虫</button>
        </div>
        <div class="col-md-8">
            <form class="form-inline">
                <div class="form-group">
                    <label for="pluginNameInput">爬虫名称: </label>
                    <input type="text" class="form-control" id="pluginNameInput" ng-model="find_crawl_name">
                </div>
                <div class="form-group">
                    <button type="text" class="form-control button button-small button-raised button-capitalize" ng-click="find_crawl()" >查找</button>
                </div>
            </form>
        </div>
        <div class="col-md-12" ><hr/></div>
        <div class="col-md-4">
            <div class="list-group" id="crawl-list-group">
                <a class="list-group-item" id="{{crawl._id.$oid}}" href="" ng-click="on_crawl_list_click($event.target)" ng-init="on_crawl_list_init(crawl._id.$oid)" ng-repeat="crawl in crawl_list | orderBy:'name'">{{crawl.name}}</a>
            </div>
        </div>
        <div class="col-md-8">
            <div class="panel panel-default">
                <div class="panel-body" style="background:#0099cc;">
                    <strong style="font-size: 30px; color:#fff;">{{current_crawl.desc}}</strong>
                    <p style="font-size: 14px; padding-left:150px; padding-top:20px; padding-bottom:10px; color:#fff;"><em>{{current_crawl.name}}</em></p>
                    <div class="col-md-3" style="float: right; margin-top:-100px">
                        <a class="button button-block button-rounded button-plain button-small button-border cannot_select" style="margin-bottom:5px;" ng-click="remove_crawl()">删除</a>
                        <a class="button button-block button-rounded button-plain button-small button-border cannot_select" style="margin-bottom:5px;" id="unload" ng-click="unload_crawl()">卸载爬虫</a>
                        <a class="button button-block button-rounded button-plain button-small button-border cannot_select" style="margin-bottom:5px;" id="load" ng-click="load_crawl()">加载爬虫</a>
                        <a class="button button-block button-rounded button-plain button-small button-border cannot_select" style="margin-bottom:5px;" ng-click="edit_crawl()">编辑</a>
                        <a class="button button-block button-rounded button-plain button-small button-border cannot_select" style="margin-bottom:5px;" ng-click="copy_crawl()">复制</a>
                    </div>
                </div>
            </div>
            <div>
                <table class="table table-hover">
                    <thead>
                        <tr>
                            <td>ID</td>
                            <td>名称</td>
                            <td>描述</td>
                            <td>等待加载元素</td>
                            <td>下一步元素</td>
                        </tr>
                    </thead>
                    <tbody>
                    <tr ng-repeat="step in current_crawl.steps">
                        <td>{{step.stepID}}</td>
                        <td>{{step.stepName}}</td>
                        <td><div style="overflow: auto; white-space: nowrap; width:120px;">{{step.desc}}</div></td>
                        <td><div style="overflow: auto; white-space: nowrap; width:160px;">{{step.waitCssList}}</div></td>
                        <td><div style="overflow: auto; white-space: nowrap; width:160px;">{{step.nextStepCss}}</div></td>
                    </tr>
                    </tbody>
                </table>
                <a class="button button-small button-raised button-capitalize button-border cannot_select" href="#/detail/{{current_crawl.name}}" id="todetail" style="float:right; font-size:12px; margin-top:-5px;">爬虫详情</a>
            </div>
        </div>
    </div>
</div>

<div class="col-md-12">

    <div class="col-md-2"></div>
    <div id="carousel-create-flowcrawl" class="carousel slide" data-ride="carousel" style="display: none;">
        <div class="col-md-8">
            <nav class="navbar navbar-default">
                <div class="container-fluid">
                    <div class="navbar-header">
                        <ul class="nav navbar-nav">
                            <li class="active" id="carousel-nav-li-0" data-target="#carousel-create-flowcrawl" data-slide-to="0"><a href="" >Start</a></li>
                        </ul>
                    </div>
                    <div class="collapse navbar-collapse">
                        <ul id="carousel-path" class="nav navbar-nav">
                            <!--
                <li data-target="#carousel-create-flowcrawl" data-slide-to="{{step.stepID}}" ng-repeat="step in edit_flowcrawl_plugin.steps"><a href="" id="grumble-{{step.stepID}}" class="button button-small button-raised button-capitalize" ng-click="on_carousel_step_change(step.stepID)" ng-mouseover="show_step_desc(step.stepID, step.desc)">Step {{step.stepID}}</a></li>
                -->
                            <li id="carousel-nav-li-{{step.stepID}}" data-target="#carousel-create-flowcrawl" data-slide-to="{{step.stepID}}" ng-repeat="step in edit_flowcrawl_plugin.steps"><a href="" id="grumble-{{step.stepID}}" ng-click="on_carousel_step_change(step.stepID)">Step {{step.stepID}}</a></li>
                        </ul>
                        <ul class="nav navbar-nav navbar-right">
                            <li><a href="" id="show-extract-config" ng-click="show_extract_config()">配置抽取</a></li>
                            <li><a href="" ng-click="show_crawl_info()">返回</a></li>
                        </ul>
                    </div>
                </div>
            </nav>

            <div class="bs-callout bs-callout-info" style="margin-top:40px;">
                <span class="">{{edit_flowcrawl_plugin.desc}} ({{edit_flowcrawl_plugin.name}})</span>
                <span id="step-info-box">
                    | <span class="">{{_current_step.desc}} ({{_current_step.stepName}})</span>
                </span>
            </div>

            <div id="carousel-step" class="carousel-inner" role="listbox">
                <div class="item carousel-first-active">
                    <div class="flowcrawl-step-pannel background-dark col-md-12" style="text-align: center;">
                        <div class="col-md-2"></div>
                        <form class="form-horizontal col-md-8">
                            <div class="form-group">
                                <label for="crawl-name">爬虫名称</label>
                                <fieldset disabled>
                                    <input type="text" class="form-control" id="crawl-name-disabled" ng-model="edit_flowcrawl_plugin.name">
                                </fieldset>
                                <input type="text" class="form-control" id="crawl-name" ng-model="edit_flowcrawl_plugin.name">
                                <p style="color:#000;">字母开头，允许3-30字节，允许字母数字下划线</p>
                            </div>
                            <div class="form-group">
                                <label for="pluginDescInput">描述爬虫</label>
                                <input type="text" class="form-control" id="pluginDescInput" ng-model="edit_flowcrawl_plugin.desc">
                            </div>
                            
                            <div class="form-group">
                                <label >关键字</label>
                                <input type="text" class="form-control" ng-model="edit_flowcrawl_plugin.keyWord">
                                <p style="color:#000;">分号（;）分割多个关键字</p>
                            </div>
                            
                            <div class="form-group">
                                <label >爬虫允许开启最大线程数</label>
                                <input type="text" class="form-control" ng-model="edit_flowcrawl_plugin.maxThreadCount">
                            </div>
                            
                            <div class="form-group">
                                <label >调度时间间隔(毫秒)</label>
                                <input type="text" class="form-control" ng-model="edit_flowcrawl_plugin.scheduleInterval">
                            </div>

                            <div class="form-group">
                                <label for="pluginDescInput">回调请求地址</label>
                                <input type="text" class="form-control" id="pluginDescInput" ng-model="edit_flowcrawl_plugin.callbackLink">
                                <p style="color:#000;">爬虫完成爬取后将调用该请求地址</p>
                            </div>

                            <div class="form-group">
                                <button style="float: right;" class="button button-small button-raised button-capitalize first-add-step" ng-click="create_crawl_step()">添加新的步骤</button>
                                <button style="float: right;" class="button button-small button-raised button-capitalize first-next-step" ng-click="carousel_next()">下一步</button>
                            </div>
                        </form>
                    </div>
                </div>

                <div id="{{step.stepID}}" class="item" ng-repeat="step in edit_flowcrawl_plugin.steps">
                    <div class="flowcrawl-step-pannel background-dark col-md-12">
                        <div class="col-md-2"></div>
                        <form class="form-horizontal col-md-8">
                            <div class="form-group">
                                <label>步骤名称</label>
                                <input type="text" class="form-control" ng-model="step.stepName">
                            </div>

                            <div class="form-group">
                                <label class="control-label">步骤描述</label>
                                <input type="text" class="form-control" ng-model="step.desc">
                            </div>

                            <div class="form-group">
                                <label class="control-label">使用哪个爬虫后端分组</label>
                                <input type="text" class="form-control" ng-model="step.group">
                            </div>

                            <hr/>

                            <div class="form-group">
                                <label>页面类型</label>
                                <div class="radio">
                                    <label class="radio-inline page-type-radio">
                                        <input type="radio" name="pt-{{step.stepID}}" ng-change="on_page_type_change()" ng-model="step.pageType" value="3">中间页面</input>
                                    </label>
                                    <label class="radio-inline">
                                        <input type="radio" name="pt-{{step.stepID}}" ng-change="on_page_type_change()" ng-model="step.pageType" value="2">爬取首页</input>
                                    </label>
                                    <label class="radio-inline">
                                        <input type="radio" name="pt-{{step.stepID}}" ng-change="on_page_type_change()" ng-model="step.pageType" value="0">爬取结束页</input>
                                    </label>
                                </div>
                                <label class="checkbox-inline"  id="islistpage-{{step.stepID}}">
                                    <input type="checkbox" name="islistpage-{{step.stepID}}" ng-change="on_page_type_change()" ng-model="step.isListPage">列表页(需要翻页的页面)</input>
                                </label>
                            </div>

                            <hr/>

                            <div class="form-group">
                                <label>页面加载完成后的动作设置</label>
                                <div class="col-md-12" style="border:1px solid #ccc;">
                                    <div class="form-group col-md-6">
                                        <label>动作类型</label>
                                        <select class="form-control" ng-model="_current_baction.action" ng-options="s.type as s.type for s in bactionModel" ng-change="on_baction_change()">
                                        </select>
                                    </div>
                                    <div class="form-group col-md-6" style="margin-left: 15px;">
                                        <label>元素CSS</label>
                                        <input type="text" id="baction-css-selector-{{step.stepID}}" class="form-control" ng-model="_current_baction.css">
                                    </div>
                                    <div class="form-group col-md-6">
                                        <label>输入字符串</label>
                                        <input type="text" id="baction-type-value-{{step.stepID}}" class="form-control" ng-model="_current_baction.tvalue" ng-change="on_baction_tvalue_change()">
                                    </div>
                                    <div class="form-group col-md-6" style="margin-left: 15px;">
                                        <label>按键</label>
                                        <select class="form-control" id="baction-key-value-{{step.stepID}}" ng-model="_current_baction.kvalue" ng-options="k.value as k.name for k in keysModel">
                                        </select>
                                    </div>
                                    <div class="form-group col-md-6">
                                        <label>执行该动作后等待时间(MS)</label>
                                        <input type="text" id="baction-time-value-{{step.stepID}}" class="form-control" ng-model="_current_baction.sleepTime">
                                    </div>
                                    <div class="form-group col-md-6" style="margin-left: 15px;">
                                        <label>重复次数</label>
                                        <input type="text" id="baction-times-value-{{step.stepID}}" class="form-control" ng-model="_current_baction.repTimes">
                                    </div>
                                    <div class="form-group col-md-12">
                                        <label class="checkbox-inline">
                                            <input type="checkbox" name="ismultiple-{{step.stepID}}" ng-model="_current_baction.ismultiple">如果定位到多个元素，全部进行操作。</input>
                                        </label>
                                        <label class="checkbox-inline" id="intoKeyword-{{step.stepID}}">
                                            <input type="checkbox" name="intoKeyword-{{step.stepID}}" ng-model="_current_baction.intoKeyword">录入到关键字</input>
                                        </label>
                                        <label class="checkbox-inline">
                                            <input type="checkbox" name="overlap-{{step.stepID}}" ng-model="_current_baction.overlap">重叠动作</input>
                                        </label>
                                        <button class="button-small button-raised button-capitalize" style="color:#000; float:right;" id="add-baction-{{step.stepID}}" data="{{step.stepID}}" ng-click="add_baction($event.target)">添加动作</button>
                                        <button class="button-small button-raised button-capitalize" style="color:#000; float:right;" id="edit-baction-ok-{{step.stepID}}" ng-click="edit_baction_ok()">完成</button>
                                    </div>
                                    <div class="col-md-12"><hr/></div>
                                    <table class="table" style="font-size:16px; background-color:#fff; color:#000">
                                        <thead>
                                            <tr>
                                                <td>动作类型</td>
                                                <td>元素的CSS选择器</td>
                                                <td>输入</td>
                                                <td>按键</td>
                                                <td>等待时间</td>
                                                <td>重复次数</td>
                                                <td>操作多个元素</td>
                                                <td></td>
                                            </tr>
                                        </thead>
                                        <tbody>
                                        <tr ng-repeat="ba in step.baction">
                                            <td><a href="" ng-click="edit_baction(ba.id)">{{ba.action}}</a></td>
                                            <td>{{ba.css}}</td>
                                            <td>{{ba.tvalue}}</td>
                                            <td>{{ba.kvalue}}</td>
                                            <td>{{ba.sleepTime}}</td>
                                            <td>{{ba.repTimes}}</td>
                                            <td>{{ba.ismultiple}}</td>
                                            <td><a class="button button-caution button-small button-square" id="{{ba.id}}" ng-click="delete_baction($event.target)"><span id="{{ba.id}}" class="glyphicon glyphicon-minus"></span></a></td>
                                        </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>

                            <hr/>

                            <div class="form-group">
                                <label>下一步页面设置</label>
                                <div class="col-md-12" style="border:1px solid #ccc;">
                                    <div class="form-group col-md-12">
                                        <label>等待元素的Css选择器</label>
                                        <input type="text" class="form-control" ng-model="step.waitCssList">
                                        <p>如果有多个用分号(;)分割</p>
                                    </div>

                                    <div class="form-group next-step-css-{{step.stepID}} col-md-12">
                                        <label>下一步元素的Css选择器</label>
                                        <input type="text" class="form-control" ng-model="step.nextStepCss" >
                                    </div>

                                    <div class="form-group next-step-type-{{step.stepID}} col-md-12" id="selectorgroup">
                                        <label>选择如何进入下一步</label>
                                        <select class="form-control" ng-model="step.nextStepType" ng-options="s.type as s.type for s in nextStepTypeModel" ng-change="on_nextstep_type_change()">
                                        </select>
                                        <label class="checkbox-inline nsonp-{{step.stepID}} col-md-12">
                                            <input type="checkbox" name="nsonp-{{step.stepID}}" ng-model="step.nextStepOpenNewPage" >将要打开新页面</input>
                                        </label>
                                    </div>

                                    <div class="form-group next-step-href-attr-{{step.stepID}} col-md-12">
                                        <label>下一步链接包含在元素哪个属性中</label>
                                        <input type="text" class="form-control" ng-model="step.nextStepHrefAttribute">
                                    </div>
                                </div>
                            </div>

                            <hr/>

                            <div class="form-group">
                                <label class="listpage-next-{{step.stepID}}">分页配置</label>
                                <div class="listpage-next-{{step.stepID}} col-md-12" style="border:1px solid #ccc;">
                                    <ul class="nav nav-pills nav-justified padding-top-bottom">
                                        <li class="pages-setting-{{step.stepID}}" id="pages-setting-css-type-{{step.stepID}}" data-type="0" style="border:1px solid #ccc;"><a pdata="#pages-setting-css-type-{{step.stepID}}" sdata="{{step.stepID}}" cdata="#use-link-string-concatenation-{{step.stepID}}" ng-click="on_list_pages_setting_type($event.target)" style="color:#fff">字符串拼接方式</a></li>
                                        <li class="pages-setting-{{step.stepID}}" id="pages-setting-concatenation-type-{{step.stepID}}" data-type="1" style="border:1px solid #ccc;"><a pdata="#pages-setting-concatenation-type-{{step.stepID}}" sdata="{{step.stepID}}" cdata="#use-next-page-css-selector-{{step.stepID}}" ng-click="on_list_pages_setting_type($event.target)" style="color:#fff">寻找下一页按钮方式</a></li>
                                    </ul>

                                    <div class="form-group col-md-12">
                                        <label>当前页数元素Css选择器</label>
                                        <input type="text" class="form-control" ng-model="step.currentPageCss">
                                    </div>

                                    <div class="pages-types-item-{{step.stepID}}" id="use-link-string-concatenation-{{step.stepID}}">
                                        <div class="form-group col-md-12">
                                            <label>链接中表示分页的参数之前的字符串</label>
                                            <input type="text" class="form-control" ng-model="step.nextPageParameterPrefix">
                                        </div>
                                        <div class="form-group col-md-12">
                                            <label>链接中表示分页的参数之后的字符串</label>
                                            <input type="text" class="form-control" ng-model="step.nextPageParameterSuffix">
                                        </div>
                                        <div class="form-group col-md-12">
                                            <label>分页从第几页开始计数</label>
                                            <input type="text" class="form-control" ng-model="step.pageCountStartWith">
                                        </div>
                                        <div class="form-group col-md-12">
                                            <label>页面总页数元素Css选择器</label>
                                            <input type="text" class="form-control" ng-model="step.pageCountCss">
                                        </div>
                                    </div>

                                    <div class="pages-types-item-{{step.stepID}}" id="use-next-page-css-selector-{{step.stepID}}">
                                        <div class="form-group col-md-12">
                                            <label>下一页Css选择器</label>
                                            <input type="text" class="form-control" ng-model="step.nextPageCss">
                                        </div>
                                        <div class="form-group col-md-12">
                                            <label>进入下一页的方式</label>
                                            <select class="form-control" ng-model="step.nextPageType" ng-options="s.type as s.type for s in nextStepTypeModel" ng-change="on_next_page_type_change()"></select>
                                            <div class="form-group col-md-12" id="next-page-click-async-or-sync-{{step.stepID}}">
                                                <label class="checkbox-inline">
                                                    <input type="checkbox" name="nextpageclicksynctype-{{step.stepID}}" ng-model="step.nextPageASync">异步方式点击</input>
                                                </label>
                                                <div class="form-group col-md-12">
                                                    <label>点击后等待时间（秒）</label>
                                                    <input type="text" class="form-control" ng-model="step.nextPageClickWaitTime">
                                                </div>
                                                <div class="form-group col-md-12">
                                                    <label>通过元素内容变更判断是否翻页成功</label>
                                                    <input type="text" class="form-control" ng-model="step.nextPageClickWaitCssChanged">
                                                </div>
                                            </div>
                                            <div class="form-group col-md-12" id="next-page-href-attribute-{{step.stepID}}">
                                                <label>下一页链接包含在元素哪个属性中</label>
                                                <input type="text" class="form-control" ng-model="step.nextPageHrefAttribute">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>


                            <hr/>

                            <div class="form-group">
                                <label>其他设置</label>
                                <div class="col-md-12" style="border:1px solid #ccc;">
                                    <div class="form-group col-md-12">
                                        <label class="checkbox-inline">
                                            <input type="checkbox" name="cck-{{step.stepID}}" ng-model="step.needCarryCookie" ng-change="on_carry_cookie_checkbox_change()">将本页的Cookies传到下一页</input>
                                        </label>
                                    </div>

                                    <div class="form-group col-md-12" id="carrycookie-{{step.stepID}}">
                                        <label>需要传到下一页的cookie名称</label>
                                        <input type="text" class="form-control" ng-model="step.carryCookieName">
                                        <p>如果有多个用分号(;)分割, 星号(*)表示全部都传给下一页</p>
                                    </div>

                                    <div class="form-group col-md-12">
                                        <label class="checkbox-inline"  id="useIncremental-{{step.stepID}}">
                                            <input type="checkbox" name="useIncremental-{{step.stepID}}" ng-model="step.useIncrementalFilter">增量抓取时对后续链接请求进行去重</input>
                                        </label>
                                    </div>
                                </div>
                            </div>

                            <div class="form-group start-step-{{step.stepID}}">
                                <hr/>
                                <label>爬取首页链接</label>
                                <textarea type="text" class="form-control" ng-model="step.startUrls" ></textarea>
                                <hr/>
                            </div>

                            <div class="form-group">
                                <!-- <button class="button button-small button-raised button-capitalize" ng-click="print_info()">Print</button> -->
                                <button style="float: right;" class="button button-small button-raised button-capitalize end-step-{{step.stepID}}" ng-click="save_crawl()" style="display: none;">保存</button>
                                <button style="float: right;" class="button button-small button-raised button-capitalize add-new-step-{{step.stepID}}" ng-click="create_crawl_step()">添加新步骤</button>
                                <button style="float: right;" class="button button-small button-raised button-capitalize complete-step-{{step.stepID}}" ng-click="carousel_next()">下一步</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-md-2" style="z-index: 100;">
            <div class="shadow opacitybox" id="extract-config" style="position: absolute; width:600px; margin-left: -800px; background-color: #efe;">
                <div class="col-md-12" style="background-color: #eee;">
                    <a class="button button-small button-highlight button-capitalize" id="hide-extract-config" style="font-size:12px; float: right; color:#FFF;" ng-click="hide_extract_config()"><strong>关闭</strong></a>
                    <h4>配置抽取</h4>
                    <span style="font-size:15px;">&nbsp;&nbsp;&nbsp;&nbsp;{{edit_flowcrawl_plugin.desc}} / {{_current_step.desc}} </span>
                </div>
                <div class="col-md-12" style="margin-top: 10px;">
                    <form class="form" style="text-align:center;">
                        <div class="form-group">
                            <label for="key" class="control-label">字段名</label>
                            <input type="text" id="key" class="form-control" ng-model="current_field.key">
                        </div>
                        <div class="form-group">
                            <label for="datatype" class="control-label">数据类型</label>
                            <select class="form-control" id="datatype" ng-model="current_field.datatype" ng-change="on_extract_datatype_change()" ng-options="s.type as s.type for s in dataTypes">
                            </select>
                        </div>

                        <div class="form-group">
                            <button class="button button-small button-primary button-capitalize" style="color:#FFF;" id="openJsEditor" ng-click="open_jseditor()">编辑脚本</button>
                        </div>

                        <div class="form-group" id="editXPath">
                            <label class="control-label">提取SelectQuery : </label>
                            <input type="text" id="key" class="form-control" ng-model="current_field.selectQuery">
                            <label class="checkbox-inline">
                                <input type="checkbox" name="ismultiple" ng-model="current_field.ismultiple">是否提取其他路径相同的元素的内容</input>
                            </label>
                            <label class="checkbox-inline" id="isindex_checkbox">
                                <input type="checkbox" name="isindex" ng-model="current_field.isindex" ng-change="on_isindex_change()">聚合字段</input>
                            </label>
                        </div>

                        <div class="form-group col-md-12" id="add-not-analyzed-btn">
                            <button class="button button-small button-primary button-capitalize" style="color:#FFF; float:right;" ng-click="add_not_analyzed_mapping_field()">添加 not_analyzed 索引映射</button>
                        </div>

                        <div class="form-group col-md-12">
                            <button class="button button-small button-primary button-capitalize" style="color:#FFF; float:right;" id="add-field-btn" ng-click="add_field()">添加</button>
                            <button class="button button-small button-primary button-capitalize" style="color:#FFF; float:right;" id="fix-field-btn" ng-click="fix_field()">完成</button>
                        </div>
                    </form>
                </div>
                <div class="col-md-12" style="margin-top: 10px; height:200px; overflow:auto; border-top:1px solid; border-bottom:1px solid;">
                    <table class="table table-hover">
                        <thead>
                            <tr>
                                <td>键</td>
                                <td>数据类型</td>
                                <td>提取Query</td>
                                <td>Mulitiple</td>
                                <td>聚合</td>
                                <td></td>
                            </tr>
                        </thead>
                        <tbody>
                        <tr ng-repeat="field in config.fields">
                            <td ng-click="load_field(field)"><a href="">{{field.key}}</a></td>
                            <td>{{field.datatype}}</td>
                            <td>{{field.selectQuery}}</td>
                            <td>{{field.ismultiple}}</td>
                            <td>{{field.isindex}}</td>
                            <td><a class="button button-caution button-small button-square" id="{{field.id}}" ng-click="delete_field($event.target)"><span id="{{field.id}}" class="glyphicon glyphicon-minus"></span></a></td>
                        </tr>
                        </tbody>
                    </table>
                </div>

                <div class="col-md-12" style="margin-top:10px; padding-top: 5px; padding-bottom: 5px; border-bottom:1px solid;">
                    <div class="col-md-12">
                        <label for="key" class="control-label col-md-4">提取结束回调链接:</label>
                        <input type="text" id="key" class="col-md-8" ng-model="config.endCallbackLink">
                    </div>
                    <!--
                    <div class="col-md-12">
                    <div class="col-md-12">
                        <label class="checkbox-inline">
                            <input type="checkbox" name="dataPushToMQ" ng-change="on_use_data_mq_change()" ng-model="config.dataPushToMQ">数据推入消息队列</input>
                        </label>
                    </div>
                    </div>
                    -->
                    <div class="col-md-12" id="dataMQName">
                        <label for="key" class="control-label col-md-4">队列名称:</label>
                        <input type="text" class="col-md-8" ng-model="config.dataMQName">
                    </div>
                </div>

                <div class="col-md-12" style="margin-top:30px; margin-bottom: 5px;">
                    <button id="stop-extracting-button" class="button button-small button-primary button-capitalize" ng-click="stop_extract_data()">停止</button>
                    <button id="extract-button" class="button button-small button-primary button-capitalize" ng-click="extract_data(0)">提取数据</button>
                    <button id="i-extract-button" class="button button-small button-primary button-capitalize" ng-click="extract_data(1)">增量提取</button>
                    <button id="extract-filter-button" class="button button-small button-primary button-capitalize" ng-click="extract_data(2)">构建过滤字典</button>
                    <button id="extract-doindex-button" class="button button-small button-primary button-capitalize" ng-click="extract_data(3)">创建索引</button>
                </div>
                <div class="col-md-12" style="margin-top:30px; margin-bottom: 5px;">
                    <button id="save-extract-button" class="button button-small button-primary button-capitalize" style="float: right;" ng-click="save_config()">保存</button>
                    <button id="test-extract-button" class="button button-small button-highlight button-capitalize" style="float: right;" ng-click="test_extract_data()">测试提取</button>
                </div>
            </div>
        </div>

        <div class="col-md-12" ><hr/></div>
    </div>

</div>

<div class="tips" style="display: none;">
    <div id="save-requesting-tips">
        <p class="tips-info" style="color:red;">保存中...</p>
    </div>
    <div id="save-success-tips">
        <p class="tips-success" style="color:red;">保存成功 !</p>
    </div>
    <div id="save-failed-tips">
        <p class="tips-failed" style="color:red;">保存失败 !</p>
    </div>
    <div id="extract-requesting-tips">
        <p class="tips-info" style="color:red;">启动中...</p>
    </div>
    <div id="extract-running-tips">
        <p class="tips-info" style="color:red;">正在进行中 !</p>
    </div>
    <div id="extract-success-tips">
        <p class="tips-info" style="color:red;">开始 !</p>
    </div>
    <div id="extract-failed-tips">
        <p class="tips-failed" style="color:red;">失败 !</p>
    </div>
    <div id="stoping-extract-tips">
        <p class="tips-failed" style="color:red;">停止中 ...</p>
    </div>
    <div id="stop-extract-succ-tips">
        <p class="tips-failed" style="color:red;">已经停止</p>
    </div>
    <div id="stop-extract-fail-tips">
        <p class="tips-failed" style="color:red;">停止失败</p>
    </div>
</div>

<div class="modal fade" id="tipsEditorModal" tabindex="-1" role="dialog" aria-labelledby="sendgroupModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-body" id="tips-content">
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="jsEditorModal" tabindex="-1" role="dialog" aria-labelledby="sendgroupModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content" style="width:800px; margin-left: -220px;">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                <h4 class="modal-title" id="sendgroupModalTitle">JS代码编辑器</h4>
            </div>
            <div class="modal-body">
                <div class="col-md-12"></div>
                <form role="form" id="fieldForm">
                <div id="field_script_editor">
                    <ul class="nav nav-tabs" role="tablist">
                        <li role="presentation" id="code_mode" class="active">注：传入参数是页面源码，默认必须存在 parse 函数。</li>
                    </ul>
                    <div id="jsEditor"></div>
                </div> 
                </form> 
            </div>
            <div class="modal-footer">
                <button type="button" class="button button-small button-raised button-capitalize" data-dismiss="modal">取消</button>
                <button type="button" class="button button-primary button-small button-raised button-capitalize" data-dismiss="modal" ng-click="save_js_script()">确认</button>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="treeViewModal" tabindex="-1" role="dialog" aria-labelledby="sendgroupModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content" style="width:800px; margin-left: -220px;">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                <h4 class="modal-title" id="sendgroupModalTitle">提取结果</h4>
            </div>
            <div class="modal-body">
                <div id="on-test-info">
                </div>
                <div id="on-test-start">
                    请稍等 ......
                </div>
                <div id="on-test-error">
                    请求出错！
                </div>
                <div id="extractTreeView" class="extractTreeView">
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="button button-small button-raised button-capitalize" data-dismiss="modal">确认</button>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="copyCrawlNameModal" tabindex="-1" role="dialog" aria-labelledby="sendgroupModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content" style="width:800px; margin-left: -220px;">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                <h4 class="modal-title" id="sendgroupModalTitle">复制爬虫配置</h4>
            </div>
            <div class="modal-body">
                <form class="form">
                    <div class="form-group">
                        <label>新爬虫名称 :</label>
                        <input size="30" type="text" ng-model="current_crawl.name">
                        <p style="color:#000;">字母开头，允许3-30字节，允许字母数字下划线</p>
                    </div>
                    <div class="form-group">
                        <label>新爬虫描述 :</label>
                        <input size="16" type="text" ng-model="current_crawl.desc">
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="button button-small button-raised button-capitalize" ng-click="cancel_copy_crawl()" data-dismiss="modal">取消</button>
                <button type="button" class="button button-small button-raised button-capitalize" ng-click="do_copy_crawl()" data-dismiss="modal">确认</button>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="removeCrawlNameModal" tabindex="-1" role="dialog" aria-labelledby="sendgroupModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content" style="width:800px; margin-left: -220px;">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                <h4 class="modal-title" id="sendgroupModalTitle">删除爬虫配置</h4>
            </div>
            <div class="modal-body">
                <p style="color: red;">确认删除 {{current_crawl.name}} 爬虫配置？</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="button button-small button-raised button-capitalize" data-dismiss="modal">取消</button>
                <button type="button" class="button button-small button-raised button-capitalize" ng-click="do_remove_crawl()" data-dismiss="modal">确认</button>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="unloadCrawlNameModal" tabindex="-1" role="dialog" aria-labelledby="sendgroupModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content" style="width:800px; margin-left: -220px;">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                <h4 class="modal-title" id="sendgroupModalTitle">卸载爬虫</h4>
            </div>
            <div class="modal-body">
                <p style="color: red;">确认卸载 {{current_crawl.name}} 爬虫？</p>
                <p>如果该爬虫正在运行，将被停止！</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="button button-small button-raised button-capitalize" data-dismiss="modal">取消</button>
                <button type="button" class="button button-small button-raised button-capitalize" ng-click="do_unload_crawl()" data-dismiss="modal">确认</button>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="saveCrawlNameModal" tabindex="-1" role="dialog" aria-labelledby="sendgroupModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content" style="width:800px; margin-left: -220px;">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                <h4 class="modal-title" id="sendgroupModalTitle">确认保存</h4>
            </div>
            <div class="modal-body">
                <p>该爬虫正在运行, 如果保存爬虫将停止并重新加载!</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="button button-small button-raised button-capitalize" data-dismiss="modal">取消</button>
                <button type="button" class="button button-small button-raised button-capitalize" ng-click="do_save_crawl()" data-dismiss="modal">确认</button>
            </div>
        </div>
    </div>
</div>

